<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表过滤和排序</title>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="test">
    <input type="text" v-model="searceName">
    <ul>
        <li v-for="(p,index) in filterPersons" :key="index">
            {{p.name}}-----{{p.age}}----
            <button @click="deletep(index)">删除</button>
        </li>
    </ul>
    <button @click="setOrderType(1)">年龄升序</button>
    <button @click="setOrderType(2)">年龄降序</button>
    <button @click="setOrderType(0)">原来顺序</button>
</div>
<script type="text/javascript">
  const vm = new Vue({
    el: '#test',
    data: {
        searceName: '',
        orderType: 0,//0原本 1升序 2降序
      persons: [
        {name: 'Tom', age: 18},
        {name: 'Jack', age: 13},
        {name: 'Bob', age: 12},
        {name: 'Rose', age: 15}
      ]
    },
      methods:{
          setOrderType (value) {
              this.orderType = value;
          }
      },
      computed:{
          filterPersons(){
              const {searceName,persons,orderType}=this;
              let fPerson;
              fPerson = persons.filter(p => p.name.indexOf(searceName) !== -1);
              //排序
              if (orderType !==0){
                  fPerson.sort(function (p1,p2){//返回负数p1在前，返回正数p2在前
                      if (orderType ===1){
                          return p2.age-p1.age;
                      }
                      return p1.age-p2.age;
                  });
              }
              return fPerson;
          }
      }
  })
</script>
</body>
</html>